<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google 文字切换效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--
        链接：https://www.google.com/chrome/    
        TODO:待完善功能
    -->
    <div class="chr-grid-default-parent">
        <div class="chr-accordion-timed__container chr-grid-default">
            <!--
    图片
-->
            <div class="chr-accordion-timed__panel-wrapper">
                <div class="chr-accordion-timed__panel chr-accordion-timed__panel--active">
                    <img src="./img/themes-2x.webp" width="624" height="624">
                </div>
                <div class="chr-accordion-timed__panel chr-accordion-timed__panel--hide">
                    <img src="./img/tab-sync-2x.webp" width="624" height="624">
                </div>
                <div class="chr-accordion-timed__panel chr-accordion-timed__panel--hide">
                    <img src="./img/autofill-2x.webp" width="624" height="624">
                </div>
            </div>
            <!--
    描述
-->
            <div class="chr-accordion-timed__side-content">
                <div class="chr-accordion-timed__list">
                    <!--开始-->
                    <div
                        class="chr-accordion-timed__item chr-accordion-timed__item--active-fixed chr-accordion-timed__item--active">
                        <!--边框-->
                        <div class="chr-accordion-timed__item__progress-wrapper">
                            <div class="chr-accordion-timed__item__progress">

                            </div>
                            <div
                                class="chr-accordion-timed__item__progress chr-accordion-timed__item__progress--active">
                            </div>
                        </div>
                        <!--介绍-->
                        <div class="chr-accordion-timed__item__content">
                            <div class="chr-accordion-timed__item__title chr-accordion-timed__item__title-container">
                                <div class=" chr-accordion-timed__item__title chr-headline-4">

                                    Customize your Chrome

                                </div>
                            </div>
                            <div class="chr-accordion-timed__item__body">
                                <div class="chr-accordion-timed__item__inner-body">
                                    <p class="chr-copy-xl">
                                        Personalize your web browser with themes, dark mode and other options built just
                                        for you.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--开始-->
                    <div
                        class="chr-accordion-timed__item chr-accordion-timed__item--active-fixed chr-accordion-timed__item--hide">
                        <!--边框-->
                        <div class="chr-accordion-timed__item__progress-wrapper">
                            <div class="chr-accordion-timed__item__progress">

                            </div>
                            <div
                                class="chr-accordion-timed__item__progress chr-accordion-timed__item__progress--active">
                            </div>
                        </div>
                        <!--介绍-->
                        <div class="chr-accordion-timed__item__content">
                            <div class="chr-accordion-timed__item__title chr-accordion-timed__item__title-container">
                                <div class=" chr-accordion-timed__item__title chr-headline-4">

                                    Customize your Chrome

                                </div>
                            </div>
                            <div class="chr-accordion-timed__item__body">
                                <div class="chr-accordion-timed__item__inner-body">
                                    <p class="chr-copy-xl">
                                        Personalize your web browser with themes, dark mode and other options built just
                                        for you.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--开始-->
                    <div
                        class="chr-accordion-timed__item chr-accordion-timed__item--active-fixed chr-accordion-timed__item--hide">
                        <!--边框-->
                        <div class="chr-accordion-timed__item__progress-wrapper">
                            <div class="chr-accordion-timed__item__progress">

                            </div>
                            <div
                                class="chr-accordion-timed__item__progress chr-accordion-timed__item__progress--active">
                            </div>
                        </div>
                        <!--介绍-->
                        <div class="chr-accordion-timed__item__content">
                            <div class="chr-accordion-timed__item__title chr-accordion-timed__item__title-container">
                                <div class=" chr-accordion-timed__item__title chr-headline-4">

                                    Customize your Chrome

                                </div>
                            </div>
                            <div class="chr-accordion-timed__item__body">
                                <div class="chr-accordion-timed__item__inner-body">
                                    <p class="chr-copy-xl">
                                        Personalize your web browser with themes, dark mode and other options built just
                                        for you.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</body>

</html>